/**
 * 信息box
 * @author xiaoxujs
 */

import { Button } from "antd";
import { XinxiBoxStyle } from "../../style";
import { FC, useState } from "react";
import { IBaseBarrierConfigList } from "../../../../../type/wulian";
import ChangeParams from '../ChangeParams'

const XinxiBox: FC<{
    data?: IBaseBarrierConfigList,
    ruChuFun: () => Promise<void>
    isChu: boolean
}> = ({
    data,
    ruChuFun,
    isChu
}) => {
        const [changeParamsShow, setChangeParamsShow] = useState(false); //
        return <XinxiBoxStyle>
            <div className="title">{
                isChu ? '出矿闸道配置' : '入矿闸道配置'
                }</div>
            <ul>
                <li>
                    <div className="li_title">IP地址</div>
                    <div className="li_value">{data?.barrierIp}</div>
                </li>
                <li>
                    <div className="li_title">端口号</div>
                    <div className="li_value">{data?.port}</div>
                </li>
                <li>
                    <div className="li_title">用户名</div>
                    <div className="li_value">{data?.barrierUser}</div>
                </li>
                <li>
                    <div className="li_title">密码</div>
                    <div className="li_value">{data?.barrierPassword}</div>
                </li>
                <li>
                    <div className="li_title">输出端口</div>
                    <div className="li_value">{data?.portNum}</div>
                </li>
                <li>
                    <div className="li_title">RTSP视频流地址</div>
                    <div className="li_value">{data?.streamAddr}</div>
                </li>
                <li>
                    <div className="li_title">设备序列号</div>
                    <div className="li_value">{data?.equipmentNum}</div>
                </li>
                <li>
                    <div className="li_title">备注</div>
                    <div className="li_value">{data?.remark}</div>
                </li>
                
                <div className="button_position">
                    <Button icon={<span className="iconfont">&#xe642;</span>} onClick={() => setChangeParamsShow(true)}>编辑参数</Button>
                </div>
            </ul>
            <ChangeParams open={changeParamsShow} data={data} ruChuFun={() => {
                setChangeParamsShow(false);
                ruChuFun()
            }} />
        </XinxiBoxStyle>
    }

export default XinxiBox;